<template>
	<view class="bg">
		<scroll-view class="hide" scroll-y="true">
			<view class="list" v-for="(item,index) in list">
				<image mode="aspectFill" :src="item.image_input[0]"></image>
				<view class="info">
					<view style="font-size: 32rpx;color: #1A1917;font-weight: bold;">{{item.title}}</view>
					<view class="address">
						<view style="color: #fff;width: 75%;font-size: 26rpx;">
							<view>{{formatDate(item.start_time)}} - {{formatDate(item.end_time).substring(11,17)}}
							</view>
							<view>{{item.address}}</view>
						</view>
							<view class="btn" v-if="item.status == 1" @click="go(item.id,item.name,item.phone,item.code,item.codeimge)" style="">
								查看
							</view>
							<view style="" class="btn1"  v-else>
								已结束
							</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 50rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mayNewActList
	} from '@/api/activity.js';
	export default {
		data() {
			return {
				list: {}
			};
		},
		methods: {
			getList() {
				mayNewActList().then(res => {
					this.list = res.data
					console.log(res, 'res');
				})
			},
			formatDate(value) {
				let date = new Date(value * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
			},
			go(val,name,phone,code,img){
				uni.navigateTo({
					url:'/pages/newAdd/copy_offline?id='+val+'&name='+name+'&phone='+phone+'&code='+code+'&img=https://youzhen.sdshengyue.cn/'+img
				})
			}

		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 100vh;
		background-image: url('https://youzhen.sdshengyue.cn/uploads/attach/2023/10/20231018/be74303c6ad0d49dd6e0a8eb8671fb0c.png');
		background-size: 100% 100%;
	}

	.list {
		width: 95%;
		margin-left: 2.5%;
		// height: 300rpx;
		border-radius: 10rpx;
		border: 1px solid #E8C389;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 300rpx;
		}

		.info {
			width: 100%;
			// height: 300rpx;
			padding: 20rpx;
			background-color: #E8C389;

			.address {
				margin-top: 20rpx;
				width: 100%;
				display: flex;
			}
		}
	}

	.hide {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.btn {
		color: #3B2E31;
		width: 25%;
		height: 60rpx;
		line-height: 60rpx;
		background: linear-gradient(270deg, #FFE099 0%, #FCF1D8 100%);
		text-align: center;
		border-radius: 10rpx;
		font-weight: bold;
	}
	.btn1 {
		color: #3B2E31;
		width: 25%;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #ccc;
		text-align: center;
		border-radius: 10rpx;
		font-weight: bold;
	}
</style>